<template>
  <div style="background-color: #fff; ">
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="添加商品" name="first" v-if="route.params.id == undefined ">
    <!-- 第一页表单的内容 -->
    <el-form style="overflow: visible; padding-top: 10px;" ref="formRef" :model="Form1" label-width="100px"
      id="demo-ruleForm" v-show="isShow1">
      <el-form-item label="商品分类" style="width: 100%">
        <el-cascader v-model="Form1.good_ShangPinFenNei" :options="options" clearable />
      </el-form-item>
      <el-form-item label="商品名称" style="width: 50%">
        <el-input v-model="Form1.good_Name" placeholder="商品名称" />
      </el-form-item>
      <el-form-item label="商品库存" style="width: 50%">
        <el-input-number v-model="Form1.good_KuChun" :min="1" :max="1000" @change="handleChange" />
      </el-form-item>
      <el-form-item label="商品价格" style="width: 50%">
        <el-input v-model="Form1.good_ShangPinJiaGe" placeholder="商品价格" />
      </el-form-item>
      <el-form-item label="兑换积分" style="width: 50%">
        <el-input v-model="Form1.good_DuiHuanJiFen" placeholder="兑换积分" />
      </el-form-item>
      <el-form-item label="商品规格" style="width: 50%">
        <el-radio-group v-model="radio1" size="large" @change="changeGuige">
          <el-radio-button label="规格1" />
          <el-radio-button label="规格2" />
          <el-radio-button label="规格3" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="市场价格" style="width: 50%">
        <el-input v-model="Form1.good_ShiChangJiaGe" placeholder="市场价格" />
      </el-form-item>
      <el-form-item label="库存预警" style="width: 50%">
        <el-input v-model="Form1.kucun" placeholder="库存预警" />
      </el-form-item>
      <el-form-item label="上传图片" style="width: 50%">
        <el-upload http-request="upLoad" list-type="picture-card" :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove" :file-list="fileList" v-model="Form1.good_ImgUrl">
          <el-icon>
            <Plus />
          </el-icon>

        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品描述" style="width: 50%">
        <el-input v-model="Form1.good_ShangPinMiaoShu" type="textarea" />
      </el-form-item>
      <el-form-item label="是否推荐">
        <el-switch v-model="value1" />
      </el-form-item>
      <el-form-item label="物流运费" style="width: 50%">
        <el-input v-model="Form1.good_YunFei" placeholder="0" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm1()">下一页</el-button>
      </el-form-item>
    </el-form>
    </el-tab-pane>

    <!-- 下一页的内容 -->
    <el-tab-pane label="" name="third">
    <div v-show="true" class="xiayiye">
      <el-radio-group v-model="data.radio2" class="ml-4" @change="changeState">
        <el-radio label="1" size="large">不参与</el-radio>
        <el-radio label="2" size="large">特价</el-radio>
        <el-radio label="3" size="large">爆款退换</el-radio>
      </el-radio-group>
      <el-form ref="formRef" :model="Form2" label-width="100px" class="demo-ruleForm" v-if="data.radio2 == 2">
        <el-form-item label="特价金额" style="width: 50%">
          <el-input v-model="Form2.teJia_JinE" placeholder="特价金额" />
        </el-form-item>
        <el-form-item label="特价积分" style="width: 50%">
          <el-input v-model="Form2.teJia_JiFen" placeholder="特价积分" />
        </el-form-item>
        <el-form-item label="查询时间" style="width: 50%">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="value2" type="daterange" unlink-panels="true" range-separator="To"
              start-placeholder="起始时间" end-placeholder="结束时间" :shortcuts="shortcuts" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm2()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    </el-tab-pane>

  <el-tab-pane v-if="route.params.id != undefined "  label="编辑商品列表" name="second">
      <!-- 商品列表的表单编辑修改的内容-->
    <el-form style="overflow: visible; padding-top: 10px;" ref="formRef" :model="Form3" label-width="100px"
      id="demo-ruleForm" >
      <el-form-item label="商品ID" style="width: 50%">
        <el-input v-model="Form3.id" placeholder="商品ID" disabled/>
      </el-form-item>
      <el-form-item label="商品名称" style="width: 50%">
        <el-input v-model="Form3.good_Name" placeholder="商品名称" />
      </el-form-item>
      <el-form-item label="商品库存" style="width: 50%">
        <el-input-number v-model="Form3.good_KuChun" :min="1" :max="1000" @change="handleChange" />
      </el-form-item>
      <el-form-item label="商品价格" style="width: 50%">
        <el-input v-model="Form3.good_ShangPinJiaGe" placeholder="商品价格" />
      </el-form-item>
      <el-form-item label="兑换积分" style="width: 50%">
        <el-input v-model="Form3.good_DuiHuanJiFen" placeholder="兑换积分" />
      </el-form-item>
      <el-form-item label="商品编号" style="width: 50%">
        <el-input v-model="Form3.good_number" placeholder="市场价格" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="valueState" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm3()">提交</el-button>
      </el-form-item>
    </el-form>
  </el-tab-pane>
</el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios'

// 图片上传引入图标
import { Plus } from '@element-plus/icons-vue'

// import  { UploadProps, UploadUserFile } from 'element-plus'

// 表单1
const Form1 = reactive({
  good_Name: '',
  good_ShangPinJiaGe: '',
  good_ShiChangJiaGe: '',
  good_KuChun: '',
  good_DuiHuanJiFen: '',
  good_ShangPinFenNei: '',
  good_ShangPinGuiGe: '',
  good_YunFei: '',
  good_ShangPinMiaoShu: '',
})

//表单2 
const Form2 = reactive({
  tejiamoney: '',
  tejiajifen: '',
})


// 查询时间
const value2 = ref('')
const shortcuts = [
  {
    text: '上一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 下一页
const activeName = ref('first')
let isShow1 = ref(true)
let isShow2 = ref(false)
const submitForm1 = () => {
  // isShow1.value = false
  // isShow2.value = true
  // console.log(isShow2.value);
  activeName.value="third"
}

const data = reactive({
  radio2: '1'
})

// 图片上传
const fileList = reactive([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])

const upLoad = ref({

})

// 是否推荐
const value1 = ref(false)
// 商品规格
const radio1 = ref('New York')
const changeGuige = () => {
  console.log(radio1.value);
}

// 商品库存
const num = ref(1)
const handleChange = (value) => {
  console.log(value)
}
// 商品分类
const options = [
  {
    value: '3C数码',
    label: '3C数码',
    children: [
      {
        value: '手机通信',
        label: '手机通信',
        children: [
          {
            value: '手机',
            label: '手机',
          }
        ],
      },
      {
        value: '手机配件',
        label: '手机配件',
        children: [
          {
            value: '充电宝',
            label: '充电宝',
          },
          {
            value: '耳机',
            label: '耳机',
          },
        ],
      },
    ],
  },
]
// 商品编辑表单
const route = useRoute()
const valueState =ref(Boolean(Number(route.params.good_table_type)))
// 表单3
const Form3=reactive({
  id:route.params.id,
  good_Name:route.params.good_name,
  good_KuChun:route.params.good_stock,
  good_ShangPinJiaGe:route.params.good_price,
  good_DuiHuanJiFen:route.params.good_bonus,
  good_number:route.params.good_number,
})
console.log(route.params);
console.log(Boolean(Number(route.params.good_table_type)));
const submitForm3=()=>{

}


// 添加商品列表请求
const router = useRouter()
const submitForm2 = () => {
  console.log(Form1.good_ShangPinFenNei);
  // console.log(Number(value1.value));
  //  router.push({path: '/home/klaeManage' })
  axios({
    url: 'http://localhost:3001/addGoods',
    method: 'post',
    data: {
      good_Name: Form1.good_Name,
      good_ShangPinJiaGe: Number(Form1.good_ShangPinJiaGe),
      good_ShiChangJiaGe: Number(Form1.good_ShiChangJiaGe),
      good_KuChun: Number(Form1.good_KuChun),
      good_DuiHuanJiFen: Number(Form1.good_DuiHuanJiFen),
      good_ShangPinFenNei: Form1.good_ShangPinFenNei[2],
      good_ShangPinGuiGe: radio1.value,
      good_YunFei: Number(Form1.good_YunFei),
      good_ShangPinMiaoShu: Form1.good_ShangPinMiaoShu,
    },
  }).then(res => {
    console.log(res);
    if (res.data == 200) {
      router.push({ path: '/home/klaeManage' })
    }
  })
}
</script>

<style  scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 下一页 */
.xiayiye {
  /* position: absolute;
  top: 10px; */
}
</style>